<template>
    <el-drawer
        :visible="showLeftDraw"
        :direction="direction"
        :before-close="toggleLeftDraw"
        :size="`500px`"
    >
        <div class="contain-right">
            <div class="pageWrap">
                <el-form
                    :inline="true"
                    :model="formInline"
                    class="demo-form-inline"
                >
                    <el-form-item>
                        <el-input
                            v-model="formInline.module_name"
                            placeholder="请输入模块名称"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit"
                            >查询</el-button
                        >
                    </el-form-item>
                </el-form>
                <div class="list" v-if="moduleList.length">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column
                            prop="id"
                            label="id"
                            width="60"
                        ></el-table-column>
                        <el-table-column
                            prop="title"
                            label="模块中文名称"
                            width="180"
                        ></el-table-column>
                        <el-table-column
                            prop="module_name"
                            label="模块名"
                        ></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    size="small"
                                    :disabled="
                                        !(
                                            scope.row.moduleList &&
                                            scope.row.moduleList.length
                                        )
                                    "
                                    @click="selectRow(scope.row)"
                                    >选择</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "LeftDrawer",
    props: {
        showLeftDraw: Boolean,
        toggleLeftDraw: Function,
    },
    computed: {
        pageInfo() {
            return this.$store.state.config.data.pageInfo;
        },
        moduleList() {
            let seed = this.pageInfo.seed;
            return this.tableData.filter((v1) => {
                return !(seed.moduleList || []).find((v2) => {
                    v2.module_name === v1.module_name;
                });
            });
        },
    },
    data() {
        return {
            formInline: {
                module_name: "",
            },
            tableData: [],
            direction: "ltr",
            data: {},
        };
    },
    methods: {
        //   获取模块列表
        selectRow(item) {
            const pageInfo = this.$store.state.config.data.pageInfo;
            let seed = { ...pageInfo.seed };
            if (
                (seed.moduleList || []).find((v) => {
                    return v.module_name === item.module_name;
                })
            ) {
                this.$message("已经加入了");
                return;
            }
            seed.moduleList = [
                ...(seed.moduleList || []).map(v=>{
                    return {
                        module_name: v.module_name,
                        edition: v.edition,
                    }
                }).concat({
                    module_name: item.module_name,
                    edition: item.moduleList[0].edition,
                }),
            ];
            const moduleList  =  [...this.$store.state.config.data.moduleList,item]
            this.$http
                .post("/page/update", {
                    id: pageInfo.id,
                    seed: JSON.stringify(seed),
                })
                .then((res) => {
                    if (res.success) {
                        this.$message("修改成功");

                        setTimeout(() => {
                            window.init()
                        }, 1000);
                    }
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        onSubmit() {
            this.$http.post("/module/getList", this.formInline).then((res) => {
                if (res.success) {
                    const seed = this.pageInfo.seed;
                    this.tableData = res.data;
                }
            });
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.contain-right {
    padding: 0 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .button-wrap {
        display: flex;
        justify-content: flex-end;
        padding-bottom: 20px;
    }
}
</style>

